<script setup>
import { ref } from 'vue'

const selectDepartment = ref('全部科室')

const options = [
  {
    value: 'Option1',
    label: '全部科室',
  },
  {
    value: 'Option2',
    label: '科室1',
  },
  {
    value: 'Option3',
    label: '科室2',
  },
  {
    value: 'Option4',
    label: '科室3',
  },
  {
    value: 'Option5',
    label: '科室4',
  },
]

const selectDateRange = ref('')
</script>

<template>
  <div class="title">
    <div>患者画像分析</div>
    <div>
      <el-select
        v-model="selectDepartment"
        clearable
        placeholder="请选择"
        style="width: 100px; margin: 0 20px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-date-picker
        v-model="selectDateRange"
        type="daterange"
        range-separator="到"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        style="width: 250px"
      />
    </div>
  </div>
</template>

<style scoped>
.title {
  height: 60px;
  /* width: 1272px; */
  background-color: var(--vt-c-white);
  background-image: url('image/title-bg.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;

  > div:first-child {
    text-align: center;
    margin: 0 auto;
    font-size: 24px;
    font-weight: bold;
    line-height: 50px;
  }
  > div:last-child {
    position: absolute;
    top: 10px;
    right: 20px;
  }
}
</style>
